<!-- Page header -->
<div class="page-header d-print-none">
    <div class="container-xl">
      <div class="row g-2 align-items-center">
        <div class="col">
          <h2 class="page-title">
            收藏夹
          </h2>
        </div>
      </div>
    </div>
</div>
<!-- Page body -->
<div class="page-body">
    <div class="container-xl">
      <div class="card">
        <div class="row g-0">
          <div class="col-3 d-none d-md-block border-end">
            <div class="card-body">
              <div class="list-group list-group-transparent" id="collection_list">
                <a href="javascript:void(0);" class="list-group-item list-group-item-action d-flex align-items-center active" id="default_collection">默认收藏夹</a>
                <!-- 动态构建收藏夹 -->
              </div>
              <div class="list-group list-group-transparent">
                <a href="javascript:void(0);" class="list-group-item list-group-item-action d-flex align-items-center" data-bs-toggle="modal" data-bs-target="#add_collection">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-plus" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <path d="M12 5l0 14" />
                        <path d="M5 12l14 0" />
                    </svg>
                    &nbsp;&nbsp;新建收藏夹
                </a>
              </div>
            </div>
          </div>
          <div class="col d-flex flex-column">
            <div class="row g-2 align-items-center">
                <div class="col">
                    <h3 id="article_list_collection_name"></h3>
                </div>
                <div class="col-auto ms-auto d-print-none">
                    <div class="btn-list">
                        <a href="javascript:void(0);" class="btn btn-tabler w-100 collection_rename" data-bs-toggle="modal" data-bs-target="#collection_rename_modal" style="display: none;">
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-edit" width="24"
                              height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                              stroke-linecap="round" stroke-linejoin="round">
                              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                              <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"></path>
                              <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"></path>
                              <path d="M16 5l3 3"></path>
                            </svg>
                            <span>重命名</span>
                        </a>
                    </div>
                </div>
                <div class="col-auto ms-auto d-print-none">
                    <div class="btn-list">
                        <a href="javascript:void(0);" class="btn btn-danger w-100 collection_delete" data-bs-toggle="modal" data-bs-target="#collection_delete_modal" style="display: none;">
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-trash" width="24"
                              height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                              stroke-linecap="round" stroke-linejoin="round">
                              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                              <path d="M4 7l16 0"></path>
                              <path d="M10 11l0 6"></path>
                              <path d="M14 11l0 6"></path>
                              <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"></path>
                              <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                            </svg>
                            <span>删除</span>
                        </a>
                    </div>
                </div>
                <div class="col-auto ms-auto d-print-none">
                    <div class="btn-list">
                        <a href="javascript:void(0);" class="btn btn-info w-100" id="collection_manage">
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-list" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 6l11 0" /><path d="M9 12l11 0" /><path d="M9 18l11 0" /><path d="M5 6l0 .01" /><path d="M5 12l0 .01" /><path d="M5 18l0 .01" /></svg>
                            <span>管理</span>
                        </a>
                    </div>
                </div>
                <div class="col-auto ms-auto d-print-none">
                    <div class="btn-list">
                        <a href="javascript:void(0);" class="btn btn-outline-primary w-100" id="collection_move"  style="display: none;">
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-home-move" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2" /><path d="M19 12h2l-9 -9l-9 9h2v7a2 2 0 0 0 2 2h5.5" /><path d="M16 19h6" /><path d="M19 16l3 3l-3 3" /></svg>
                            <span>移动</span>
                        </a>
                    </div>
                </div>
                <div class="col-auto ms-auto d-print-none">
                    <div class="btn-list">
                        <a href="javascript:void(0);" class="btn btn-outline-danger w-100" id="mark_cancel" style="display: none;">
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                            <span>取消收藏</span>
                        </a>
                    </div>
                </div>
                <div class="col-auto ms-auto d-print-none">
                    <div class="btn-list">
                        <a href="javascript:void(0);" class="btn btn-outline-secondary w-100" id="collection_manage_cancel" style="display: none;">
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-x" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>
                            <span>取消</span>
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="card-body">
                <div class="divide-y" id="article-items-body">
                    <!-- 动态生成帖子列表 -->
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>
<div class="modal modal-blur fade" id="collection_rename_modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">重命名收藏夹</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-lg-12">
              <div>
                <textarea class="form-control" rows="1" id="collection_rename_content" placeholder="请输入收藏夹名称："></textarea>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <a href="javascript:void(0);" class="btn me-auto" data-bs-dismiss="modal">
            取消
          </a>
          <a href="javascript:void(0);" class="btn btn-primary ms-auto" id="btn_collection_rename">
            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-edit" width="24"
                height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"></path>
                <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"></path>
                <path d="M16 5l3 3"></path>
            </svg>
            重命名
          </a>
        </div>
      </div>
    </div>
</div>
<div class="modal modal-blur fade" id="collection_delete_modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
      <div class="modal-content">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        <div class="modal-status bg-danger"></div>
        <div class="modal-body text-center py-4">
          <svg xmlns="http://www.w3.org/2000/svg" class="icon mb-2 text-danger icon-lg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 9v2m0 4v.01" /><path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75" /></svg>
          <h3>确定要删除该收藏夹吗?</h3>
          <div class="text-muted">该收藏夹中的收藏内容将会移动到默认收藏夹中.</div>
        </div>
        <div class="modal-footer">
          <div class="w-100">
            <div class="row">
              <div class="col"><a href="javascript:void(0);" class="btn w-100" data-bs-dismiss="modal">
                  取消
                </a></div>
              <div class="col"><a href="javascript:void(0);" class="btn btn-danger w-100" data-bs-dismiss="modal" id="btn_collection_delete">
                  删除
                </a></div>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>

<div class="modal modal-blur fade" id="collection_move_modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">选择要移动的收藏夹</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body list-group list-group-transparent" id="move_collection_list">
            <!-- 生成收藏夹列表 -->
        </div>
        <div class="modal-footer">
          <div class="w-100">
            <div class="row">
              <div class="col">
                <a href="javascript:void(0);" class="btn w-100" data-bs-dismiss="modal">
                  取消
                </a>
              </div>
              <div class="col">
                <a href="javascript:void(0);" class="btn btn-primary w-100" id="btn_collection_move">
                  移动
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>

<script>
    $(function () {
        // 获取收藏夹列表
        $.ajax({
            type: 'post',
            url: '/collection/getList',
            success: function(respData) {
            if (respData.code == 0) {
                buildCollectionList(respData.data);
            } else {
                // 提示失败信息
                $.toast({
                    heading: '警告',
                    text: respData.message,
                    icon: 'warning'
                });
            }
            },
            error: function() {
                // HTTP 请求错误
                $.toast({
                    heading: '错误',
                    text: '访问出现问题，请与管理员联系.',
                    icon: 'error'
                });
            }
        });

        // 构建左侧收藏夹列表
        function buildCollectionList(data) {
            let collectionListEl = $('#collection_list');
            // 循环遍历
            data.forEach(collection => {
                // 构建html
                let itemHtml = '<a href="javascript:void(0);" class="list-group-item list-group-item-action d-flex align-items-center">' + collection.name + '</a>';
                // 转为元素
                let collectionItem = $(itemHtml);
                // 绑定数据
                collectionItem.data('collection', collection);
                // 添加点击事件
                collectionItem.click(function() {
                    changeCollectionActive(collectionItem);
                });
                // 加入到收藏夹列表
                collectionListEl.append(collectionItem);
            });
        }

        // 默认收藏夹的点击事件
        $('#default_collection').click(function () {
            // 激活效果
            changeCollectionActive($(this));
        });

        function changeCollectionActive(collectionItem) {
            if (collectionItem.hasClass('active') == false) {
                let activeLiEl = $('#collection_list > .active');
                activeLiEl.removeClass('active');
                collectionItem.addClass('active');
                $('#article-items-body').html('');
                // 获取当前收藏夹中的帖子列表
                buildArticleListByCollection();
            }
        }

        // 获取默认收藏夹中的帖子列表，显示到右侧
        function buildArticleListByCollection() {
            let activeLiEl = $('#collection_list > .active');
            let collectionData = activeLiEl.data('collection');

            if (collectionData) {
                // 显示重命名、删除、管理按钮，其他隐藏
                $('.collection_rename').show();
                $('.collection_delete').show();
                $('#collection_manage').show();
                $('#collection_move').hide();
                $('#mark_cancel').hide();
                $('#collection_manage_cancel').hide();


                $('#article_list_collection_name').html('&nbsp;&nbsp;&nbsp;' + collectionData.name);
                $.ajax({
                    type: 'get',
                    url: '/article/getByCollectionId?collectionId=' + collectionData.id,
                    success: function(respData) {
                        if (respData.code == 0) {
                            CollectionBuildArticleList(respData.data);
                        } else {
                        // 提示失败信息
                        $.toast({
                            heading: '警告',
                            text: respData.message,
                            icon: 'warning'
                        });
                        }
                    },
                    error: function() {
                        // HTTP 请求错误
                        $.toast({
                        heading: '错误',
                        text: '访问出现问题，请与管理员联系.',
                        icon: 'error'
                        });
                    }
                });
            } else {
                // 只显示管理按钮，其他隐藏
                $('.collection_rename').hide();
                $('.collection_delete').hide();
                $('#collection_manage').show();
                $('#collection_move').hide();
                $('#mark_cancel').hide();
                $('#collection_manage_cancel').hide();

                $('#article_list_collection_name').html('&nbsp;&nbsp;&nbsp;默认收藏夹');
                $.ajax({
                    type: 'get',
                    url: '/article/getByDefaultCollection',
                    success: function(respData) {
                        if (respData.code == 0) {
                            CollectionBuildArticleList(respData.data);
                        } else {
                        // 提示失败信息
                        $.toast({
                            heading: '警告',
                            text: respData.message,
                            icon: 'warning'
                        });
                        }
                    },
                    error: function() {
                        // HTTP 请求错误
                        $.toast({
                        heading: '错误',
                        text: '访问出现问题，请与管理员联系.',
                        icon: 'error'
                        });
                    }
                });
            }
        }

        let selectArray = [];

        buildArticleListByCollection();

        // 构造帖子列表
        function CollectionBuildArticleList(data) {
            if(data.length == 0) {
                $('#article-items-body').html('还没有帖子');
                return;
            }
            // 默认头像路径
            let avatarUrl = 'image/avatar01.jpeg';
            // 遍历结果
            data.forEach(article => {
                // 设置默认头像
                if (!article.user.avatarUrl) {
                article.user.avatarUrl = avatarUrl;
                }
                // 构造HTML
                let articleHtmlStr = '<div>'
                + ' <div class="row">'
                + ' <div class="col-auto">'
                + ' <span class="avatar" style="background-image: url(' + article.user.avatarUrl + ')"></span>'
                + ' </div>'
                + ' <div class="col">'
                + ' <div class="text-truncate">'
                + ' <div class="row">'
                + ' <div class="col">'
                + ' <a href="javascript:void(0);" class="article_list_a_title">'
                + ' <strong>' + article.title + '</strong>'
                + ' </a>'
                + ' </div>'
                + ' <div class="col-auto">'
                + ' <input type="checkbox" style="display: none;" class="input">'
                + ' </div>'    
                + ' </div>'
                + ' </div>'
                + ' <div class="text-muted mt-2">'
                + ' <div class="row">'
                + ' <div class="col">'
                + ' <ul class="list-inline list-inline-dots mb-0">'
                + ' <li class="list-inline-item">'
                + ' <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user"'
                + ' width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"'
                + ' fill="none" stroke-linecap="round" stroke-linejoin="round">'
                + ' <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>'
                + ' <path d="M12 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path>'
                + ' <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path>'
                + ' </svg> '
                + article.user.nickname
                + ' </li>'
                + ' <li class="list-inline-item">'
                + ' <svg xmlns="http://www.w3.org/2000/svg"'
                + ' class="icon icon-tabler icon-tabler-clock-edit" width="24" height="24"'
                + ' viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"'
                + ' stroke-linecap="round" stroke-linejoin="round">'
                + ' <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>'
                + ' <path d="M21 12a9 9 0 1 0 -9.972 8.948c.32 .034 .644 .052 .972 .052"></path>'
                + ' <path d="M12 7v5l2 2"></path>'
                + ' <path d="M18.42 15.61a2.1 2.1 0 0 1 2.97 2.97l-3.39 3.42h-3v-3l3.42 -3.39z">'
                + ' </path>'
                + ' </svg> '
                + article.createTime
                + ' </li>'
                + ' </ul>'
                + ' </div>'
                + ' <div class="col-auto  d-md-inline">'
                + ' <ul class="list-inline list-inline-dots mb-0">'
                + ' <li class="list-inline-item">'
                + ' <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-eye"'
                + ' width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"'
                + ' fill="none" stroke-linecap="round" stroke-linejoin="round">'
                + ' <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>'
                + ' <path d="M12 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>'
                + ' <path'
                + ' d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7">'
                + ' </path>'
                + ' </svg> '
                + article.visitCount
                + ' </li>'
                + ' <li class="list-inline-item">'
                + ' <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-thumb-up" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3" /></svg> '
                + article.likeCount
                + ' </li>'
                + ' <li class="list-inline-item">'
                + ' <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg> '
                + article.markCount
                + ' </li>'
                + ' <li class="list-inline-item">'
                + ' <svg xmlns="http://www.w3.org/2000/svg"'
                + ' class="icon icon-tabler icon-tabler-message-circle" width="24" height="24"'
                + ' viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"'
                + ' stroke-linecap="round" stroke-linejoin="round">'
                + ' <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>'
                + ' <path d="M3 20l1.3 -3.9a9 8 0 1 1 3.4 2.9l-4.7 1"></path>'
                + ' <path d="M12 12l0 .01"></path>'
                + ' <path d="M8 12l0 .01"></path>'
                + ' <path d="M16 12l0 .01"></path>'
                + ' </svg> '
                + article.replyCount
                + ' </li>'
                + ' </ul>'
                + ' </div>'
                + ' </div>'
                + ' </div>'
                + ' </div>'
                + ' </div>'
                + ' </div>';
                // 转为元素对象
                let articleItem = $(articleHtmlStr);
                // 获取标题的 a 标签
                let articleTitle = articleItem.find('.article_list_a_title');
                // 处理标题点击事件
                articleTitle.click(function() {
                // 通过全局变量保存当前访问的帖子信息
                    currentArticle = article;
                    $('#forum-content').load('details.html');
                });

                // 获取选择框
            let checkbox = articleItem.find('input');

            checkbox.change(function() {
                // 判断复选框是否被选中
                let isChecked = checkbox.is(":checked");
                if (isChecked) {
                    console.log("选中：", article.markId);
                    selectArray.push(article.markId);
                } else {
                    console.log("取消选中：", article.markId);
                    let index = selectArray.indexOf(article.markId);
                    if (index != -1) {
                        selectArray.splice(index, 1);
                    }
                }
                console.log(selectArray);
            })

                // 添加到列表
                $('#article-items-body').append(articleItem);
            });
        }

        // 确定重命名收藏夹按钮
        $('#btn_collection_rename').click(function() {
            let contentEL = $('#collection_rename_content');
            // 非空校验
            if (!contentEL.val()) {
                $.toast({
                    heading: '警告',
                    text: '请输入收藏夹名称！',
                    icon: 'warning'
                });
                contentEL.focus();
                return;
            }

            $('#collection_rename_modal').modal('hide');

            // 获取当前收藏夹id
            let activeLiEl = $('#collection_list > .active');
            let collectionData = activeLiEl.data('collection');
            
            if (collectionData) {
                let reqData = {
                    id: collectionData.id,
                    name: contentEL.val()
                }
                $.ajax({
                    type: 'post',
                    url: '/collection/modifyName',
                    data: reqData,
                    success: function(respData) {
                        if (respData.code == 0) {
                            $.toast({
                                heading: '成功',
                                text: respData.message,
                                icon: 'success'
                            })
                            $('#forum-content').load('collection.html');
                        } else {
                            $.toast({
                                heading: '警告',
                                text: respData.message,
                                icon: 'warning'
                            })
                        }
                    },
                    error: function() {
                        $.toast({
                            heading: '错误',
                            text: '访问出现问题，请与管理员联系.',
                            icon: 'error'
                        })
                    }
                });
            }
        });


        // 确定删除收藏夹按钮
        $('#btn_collection_delete').click(function() {
            // 获取当前收藏夹id
            let activeLiEl = $('#collection_list > .active');
            let collectionData = activeLiEl.data('collection');
            
            if (collectionData) {
                let reqData = {
                    id: collectionData.id
                }
                $.ajax({
                    type: 'post',
                    url: '/collection/deleteById',
                    data: reqData,
                    success: function(respData) {
                        if (respData.code == 0) {
                            $.toast({
                                heading: '成功',
                                text: respData.message,
                                icon: 'success'
                            })
                            $('#forum-content').load('collection.html');
                        } else {
                            $.toast({
                                heading: '警告',
                                text: respData.message,
                                icon: 'warning'
                            })
                        }
                    },
                    error: function() {
                        $.toast({
                            heading: '错误',
                            text: '访问出现问题，请与管理员联系.',
                            icon: 'error'
                        })
                    }
                });
            }
        });

        // 点击管理按钮
        $('#collection_manage').click(function() {
            // 显示移动、取消删除、取消按钮，其他隐藏
            $('.collection_rename').hide();
            $('.collection_delete').hide();
            $('#collection_manage').hide();
            $('#collection_move').show();
            $('#mark_cancel').show();
            $('#collection_manage_cancel').show();

            let checkboxList = $('.input');
            checkboxList.show();
            selectArray.length = 0;
        });


        // 取消管理按钮
        $('#collection_manage_cancel').click(function() {
            let activeLiEl = $('#collection_list > .active');
            let collectionData = activeLiEl.data('collection');

            if (collectionData) {
                // 自己创建的收藏夹
                // 显示重命名、删除、管理按钮，其他隐藏
                $('.collection_rename').show();
                $('.collection_delete').show();
                $('#collection_manage').show();
                $('#collection_move').hide();
                $('#mark_cancel').hide();
                $('#collection_manage_cancel').hide();
            } else {
                // 默认收藏夹
                // 只显示管理按钮
                $('.collection_rename').hide();
                $('.collection_delete').hide();
                $('#collection_manage').show();
                $('#collection_move').hide();
                $('#mark_cancel').hide();
                $('#collection_manage_cancel').hide();
            }

            let checkboxList = $('.input');
            checkboxList.prop("checked", false);
            checkboxList.hide();

            // 清空选择的数组
            selectArray.length = 0;
        });

        // 移动按钮点击事件
        $('#collection_move').click(function() {
            
            $('#move_collection_list').html('');

            if (selectArray.length == 0) {
                $.toast({
                    heading: '警告',
                    text: '请先选择要移动的内容!',
                    icon: 'warning'
                });
                return;
            }

            // 获取收藏夹列表
            $.ajax({
                type: 'post',
                url: '/collection/getList',
                success: function(respData) {
                if (respData.code == 0) {
                    // 获取当前收藏夹id
                    let activeLiEl = $('#collection_list > .active');
                    let collectionData = activeLiEl.data('collection');

                    let list = respData.data;

                    if (collectionData) {
                        // 当前不在默认收藏夹中

                        // 1. 显示默认收藏夹
                        let itemHtml = ' <a href="javascript:void(0);" class="list-group-item list-group-item-action d-flex align-items-center" id="move_default_collection">默认收藏夹</a> ';
                        let collectionItem = $(itemHtml);
                        collectionItem.click(function() {
                            changeMoveCollectionActive(collectionItem);
                        });
                        $('#move_collection_list').append(collectionItem);

                        // 2. list 中移除当前所在的收藏夹
                        let collectionId = collectionData.id;
                        let result = -1;
                        let index = 0;
                        list.forEach(collection => {
                            if (collection.id == collectionId) {
                                result = index;
                            }
                            index++;
                        });
                        if (result != -1) {
                            list.splice(result, 1);
                        }
                    }

                    if (list.length == 0 && !collectionData) {
                        $.toast({
                            heading: '警告',
                            text: '请先创建一个收藏夹！',
                            icon: 'warning'
                        });
                        return;
                    }

                    $('#collection_move_modal').modal('show');

                    buildMoveCollectionList(list);
                } else {
                    // 提示失败信息
                    $.toast({
                        heading: '警告',
                        text: respData.message,
                        icon: 'warning'
                    });
                }
                },
                error: function() {
                    // HTTP 请求错误
                    $.toast({
                        heading: '错误',
                        text: '访问出现问题，请与管理员联系.',
                        icon: 'error'
                    });
                }
            });
        });

        function changeMoveCollectionActive(collectionItem) {
            if (collectionItem.hasClass('active') == false) {
                let activeLiEl = $('#move_collection_list > .active');
                activeLiEl.removeClass('active');
                collectionItem.addClass('active');
            }
        }

        function buildMoveCollectionList(data) {
            // 获取加载收藏夹列表的父元素
            let collectionListEl = $('#move_collection_list');

            // 循环遍历
            data.forEach(collection => {
                // 构建html
                let itemHtml = '<a href="javascript:void(0);" class="list-group-item list-group-item-action d-flex align-items-center">' + collection.name + '</a>';
                // 转为元素
                let collectionItem = $(itemHtml);
                // 绑定数据
                collectionItem.data('collection', collection);
                // 添加点击事件
                collectionItem.click(function() {
                    changeMoveCollectionActive(collectionItem);
                });
                // 加入到收藏夹列表
                collectionListEl.append(collectionItem);
            });
        }


        $('#add_collection').click(function() {
            $('#index_add_collection_content').val('');
        });

        $('.collection_rename').click(function() {
            $('#collection_rename_content').val('');
        });

        $('#btn_collection_move').click(function() {
            // 确定移动
            // 1. 校验 selectArray 是否为空
            if (selectArray.length == 0) {
                $.toast({
                    heading: '警告',
                    text: '请先选择要移动的内容！',
                    icon: 'warning'
                });
                return;
            }
            // 2. 校验是否选择了收藏夹
            let activeLiEl = $('#move_collection_list > .active');
            if (activeLiEl.length == 0) {
                $.toast({
                    heading: '警告',
                    text: '请选择目标收藏夹！',
                    icon: 'warning'
                });
                return;
            }

            $('#collection_move_modal').modal('hide');

            let collectionData = activeLiEl.data('collection');

            let reqData;

            if (collectionData) {
                reqData = {
                    selectArray: selectArray,
                    collectionId: collectionData.id
                };
            } else {
                reqData = {
                    selectArray: selectArray
                };
            }

            // 3. 发生 ajax 请求
            $.ajax({
                type: 'post',
                url: '/bookmark/moveCollection',
                contentType: 'application/json',
                data: JSON.stringify(reqData),
                success: function(respData) {
                    if (respData.code == 0) {
                        // 提示成功信息
                        $.toast({
                            heading: '成功',
                            text: '移动成功！',
                            icon: 'success'
                        });
                        // 重新加载
                        $('#forum-content').load('collection.html');
                    } else {
                        // 提示失败信息
                        $.toast({
                            heading: '警告',
                            text: respData.message,
                            icon: 'warning'
                        });
                    }
                },
                error: function() {
                    // HTTP 请求错误
                    $.toast({
                        heading: '错误',
                        text: '访问出现问题，请与管理员联系.',
                        icon: 'error'
                    });
                }
            })
        });

        $('#mark_cancel').click(function() {
            // 取消收藏
            // 1. 校验 selectArray 是否为空
            if (selectArray.length == 0) {
                $.toast({
                    heading: '警告',
                    text: '请先选择要取消收藏的内容！',
                    icon: 'warning'
                });
                return;
            }
            // 2. 发生 ajax 请求
            // 发送请求
            $.ajax({
                type: 'post',
                url: '/bookmark/cancelByList',
                contentType: "application/json",
                data: JSON.stringify(selectArray),
                success: function(respData) {
                    if (respData.code == 0) {
                        // 提示成功信息
                        $.toast({
                            heading: '成功',
                            text: '取消收藏成功!',
                            icon: 'success'
                        });
                        // 重新加载
                        $('#forum-content').load('collection.html');
                    } else {
                        // 提示失败信息
                        $.toast({
                            heading: '警告',
                            text: respData.message,
                            icon: 'warning'
                        });
                    }
                },
                error: function() {
                    // HTTP 请求错误
                    $.toast({
                        heading: '错误',
                        text: '访问出现问题，请与管理员联系.',
                        icon: 'error'
                    });
                }
            });
        });
    });
</script>